<template>
    <div class="dashboard-container">
        <h1>系统监控仪表盘</h1>
        <div class="last-update">最后更新时间: {{ formatTimestamp(data.timestamp) }}</div>

        <!-- 系统概览 -->
        <div class="system-overview">
            <div class="card">
                <h2>系统概览</h2>
                <div class="overview-grid">
                    <div>
                        <span class="label">主机名:</span>
                        <span class="value">{{ data.hostname }}</span>
                    </div>
                    <div>
                        <span class="label">操作系统:</span>
                        <span class="value">{{ data.osType }}</span>
                    </div>
                    <div>
                        <span class="label">运行时间:</span>
                        <span class="value">{{ formatUptime(data.uptime) }}</span>
                    </div>
                    <div>
                        <span class="label">Node版本:</span>
                        <span class="value">{{ data.nodeVersion }}</span>
                    </div>
                    <div>
                        <span class="label">Node进程PID:</span>
                        <span class="value">{{ data.pid }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- CPU和内存 -->
        <div class="row">
            <div class="card">
                <h2>CPU 使用情况</h2>
                <div class="cpu-info">
                    <div class="cpu-brand">{{ data.cpu.manufacturer }} {{ data.cpu.brand }}</div>
                    <div class="cpu-cores">核心数: {{ data.cpu.cores }}核 @ {{ data.cpu.speed }}GHz</div>
                </div>
                <div class="progress-container">
                    <div class="progress-label">总负载: {{ data.cpu.load }}%</div>
                    <div class="progress-bar">
                        <div class="progress-fill" :style="{ width: data.cpu.load + '%' }"></div>
                    </div>
                    <div class="progress-details">
                        <span>用户空间: {{ data.cpu.loadUser }}%</span>
                        <span>系统空间: {{ data.cpu.loadSystem }}%</span>
                    </div>
                </div>
                <div class="cpu-temp">温度: {{ data.cpu.temperature }}</div>
            </div>

            <div class="card">
                <h2>内存 使用情况</h2>
                <div class="memory-info">
                    <div>总内存: {{ data.memory.totalGB }} GB</div>
                    <div>已使用: {{ data.memory.usedGB }} GB</div>
                    <div>可用: {{ data.memory.freeGB }} GB</div>
                </div>
                <div class="progress-container">
                    <div class="progress-label">使用率: {{ data.memory.usagePercent }}%</div>
                    <div class="progress-bar">
                        <div class="progress-fill" :style="{ width: data.memory.usagePercent + '%' }"></div>
                    </div>
                </div>
                <div class="node-memory">Node进程内存占用: {{ data.memory.nodeProcessUsage }}%</div>
            </div>
        </div>

        <!-- 磁盘信息 -->
        <div class="card">
            <h2>磁盘 使用情况</h2>
            <div class="disks-grid">
                <div v-for="disk in data.disks" :key="disk.fs" class="disk-item">
                    <div class="disk-header">
                        <span class="disk-fs">{{ disk.fs }}</span>
                        <span class="disk-type">{{ disk.type }}</span>
                    </div>
                    <div class="disk-size">容量: {{ disk.sizeGB }} GB</div>
                    <div class="progress-container">
                        <div class="progress-label">已用 {{ disk.usedGB }} GB ({{ disk.usePercent }}%)</div>
                        <div class="progress-bar">
                            <div class="progress-fill" :style="{ width: disk.usePercent + '%' }"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 网络和进程 -->
        <div class="row">
            <div class="card">
                <h2>网络 状态</h2>
                <div class="network-traffic">
                    <div>
                        <span class="label">接收速率:</span>
                        <span class="value">{{ data.network.rxSec }} KB/s</span>
                    </div>
                    <div>
                        <span class="label">发送速率:</span>
                        <span class="value">{{ data.network.txSec }} KB/s</span>
                    </div>
                </div>
                <h3>网络接口</h3>
                <div class="network-interfaces">
                    <div v-for="iface in data.network.interfaces" :key="iface.name" class="interface-item">
                        <div class="interface-name">{{ iface.name }}</div>
                        <div v-if="iface.ip4" class="interface-ip">IPv4: {{ iface.ip4 }}</div>
                        <div v-if="iface.ip6" class="interface-ip">IPv6: {{ iface.ip6 }}</div>
                    </div>
                </div>
            </div>

            <div class="card">
                <h2>进程 信息</h2>
                <div class="process-stats">
                    <div>总进程数: {{ data.processes.total }}</div>
                    <div>运行中: {{ data.processes.running }}</div>
                    <div>阻塞: {{ data.processes.blocked }}</div>
                    <div>休眠: {{ data.processes.sleeping }}</div>
                </div>
                <h3>资源占用最高的进程</h3>
                <table class="process-table">
                    <thead>
                        <tr>
                            <th>PID</th>
                            <th>名称</th>
                            <th>CPU%</th>
                            <th>内存%</th>
                            <th>命令</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="proc in data.processes.topProcesses" :key="proc.pid">
                            <td>{{ proc.pid }}</td>
                            <td>{{ proc.name }}</td>
                            <td>{{ proc.cpu }}</td>
                            <td>{{ proc.mem }}</td>
                            <td class="command-cell">{{ truncateCommand(proc.command) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SystemDashboard',
    data() {
        return {
            data: {
                "timestamp": "2025-07-10T02:42:30.022Z",
                "hostname": "DESKTOP-899ONQE",
                "uptime": 5738.671,
                "osType": "Windows_NT 10.0.19045",
                "cpu": {
                    "manufacturer": "Intel",
                    "brand": "Gen Intel® Core™ i9-13900K",
                    "cores": 32,
                    "speed": 3,
                    "load": "2.4",
                    "loadUser": "1.6",
                    "loadSystem": "0.7",
                    "temperature": "N/A"
                },
                "memory": {
                    "totalGB": "31.70",
                    "usedGB": "16.27",
                    "freeGB": "15.43",
                    "usagePercent": "51.3",
                    "nodeProcessUsage": "0.3"
                },
                "disks": [
                    {
                        "fs": "C:",
                        "type": "NTFS",
                        "sizeGB": "476.55",
                        "usedGB": "107.61",
                        "usePercent": "22.6"
                    },
                    {
                        "fs": "D:",
                        "type": "NTFS",
                        "sizeGB": "466.01",
                        "usedGB": "50.03",
                        "usePercent": "10.7"
                    },
                    {
                        "fs": "E:",
                        "type": "NTFS",
                        "sizeGB": "466.00",
                        "usedGB": "0.11",
                        "usePercent": "0.0"
                    },
                    {
                        "fs": "F:",
                        "type": "NTFS",
                        "sizeGB": "931.00",
                        "usedGB": "85.24",
                        "usePercent": "9.2"
                    }
                ],
                "network": {
                    "rxSec": "0.00",
                    "txSec": "0.00",
                    "interfaces": [
                        {
                            "name": "以太网",
                            "ip4": "192.168.1.6",
                            "ip6": "240e:39b:b700:1770:349:835c:dfd6:61d0"
                        },
                        {
                            "name": "Loopback Pseudo-Interface 1",
                            "ip4": "127.0.0.1",
                            "ip6": "::1"
                        }
                    ]
                },
                "processes": {
                    "total": 314,
                    "running": 0,
                    "blocked": 0,
                    "sleeping": 0,
                    "topProcesses": [
                        {
                            "pid": 0,
                            "name": "System Idle Process",
                            "cpu": "97.9",
                            "mem": "0.0",
                            "command": "System Idle Process"
                        },
                        {
                            "pid": 26552,
                            "name": "Code.exe",
                            "cpu": "0.4",
                            "mem": "1.8",
                            "command": "\"D:\\xusir\\software\\Microsoft VS Code\\Code.exe\" --type=renderer --user-data-dir=\"C:\\Users\\admin\\AppDat a\\Roaming\\Code\" --standard-schemes=vscode-webview,vscode-file --enable-sandbox --secure-schemes=vscod e-webview,vscode-file --cors-schemes=vscode-webview,vscode-file --fetch-schemes=vscode-webview,vscode -file --service-worker-schemes=vscode-webview --code-cache-schemes=vscode-webview,vscode-file --app-u ser-model-id=Microsoft.VisualStudioCode --app-path=\"D:\\xusir\\software\\Microsoft VS Code\\resources\\app \" --enable-sandbox --enable-blink-features=HighlightAPI --disable-blink-features=FontMatchingCTMigrat ion,StandardizedBrowserZoom, --video-capture-use-gpu-memory-buffer --lang=zh-CN --device-scale-factor =1 --num-raster-threads=4 --enable-main-frame-before-activation --renderer-client-id=4 --time-ticks-a t-unix-epoch=-1752109611195513 --launch-time-ticks=139685422 --field-trial-handle=1796,i,997230151525 5960849,17425370031736566921,262144 --enable-features=DocumentPolicyIncludeJSCallStacksInCrashReports ,EarlyEstablishGpuChannel,EstablishGpuChannelAsync --disable-features=CalculateNativeWinOcclusion,Spa reRendererForSitePerProcess,WinDelaySpellcheckServiceInit --variations-seed-version --mojo-platform-c hannel-handle=3188 --vscode-window-config=vscode:17d673cd-1f5b-4ee6-85a4-500ba55771b1 /prefetch:1"
                        },
                        {
                            "pid": 21624,
                            "name": "msedge.exe",
                            "cpu": "0.2",
                            "mem": "0.7",
                            "command": "\"C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe\" --type=renderer --pdf-upsell-enabled - -no-pre-read-main-dll --video-capture-use-gpu-memory-buffer --lang=zh-CN --js-flags=--ms-user-locale= --device-scale-factor=1 --num-raster-threads=4 --enable-main-frame-before-activation --renderer-clie nt-id=18 --time-ticks-at-unix-epoch=-1752109611195512 --launch-time-ticks=101062034 --always-read-mai n-dll --field-trial-handle=2340,i,10737354978265519860,3475538104560807172,262144 --variations-seed-v ersion --mojo-platform-channel-handle=8308 /prefetch:1"
                        },
                        {
                            "pid": 2000,
                            "name": "dwm.exe",
                            "cpu": "0.1",
                            "mem": "0.3",
                            "command": "dwm.exe"
                        },
                        {
                            "pid": 15400,
                            "name": "Feishu.exe",
                            "cpu": "0.1",
                            "mem": "0.8",
                            "command": "\"C:\\Users\\admin\\AppData\\Local\\Feishu\\app\\Feishu.exe\" --type=renderer --no-appcompat-clear --start-sta ck-profiler --first-renderer-process --indexeddb-idle-check-seconds=5 --enable-fix-msime-issue --scen e=profile_main --enable-prefer-compositing-to-lcd-text --enable-run-before-paint --enable-renderer-ja nk-monitor --enable-native-resource-code-cache --block-unsubscribe-shell-api-event --enable-shellapi- new-tunnel --enable-shellapi-jsb-permission-no-http --enable-v8-callstack-check --enable-v8-callstack -check-block --lang=zh-CN --device-scale-factor=1 --num-raster-threads=4 --enable-main-frame-before-a ctivation --renderer-client-id=7 --time-ticks-at-unix-epoch=-1752109611180130 --browser-runtime --aha -multi-profile --launch-time-ticks=89510983 --mojo-platform-channel-handle=4528 --field-trial-handle= 2196,i,7402973415351969745,3796049399269309494,262144 --disable-features=HttpsUpgrades --variations-s eed-version --smc-metadata=1204,4703036249048702501,13411303461180425324,20971520 /prefetch:1"
                        }
                    ]
                },
                "nodeVersion": "v20.19.2",
                "pid": 29036,
                "platform": "win32"
            }
        }
    },
    methods: {
        formatTimestamp(timestamp) {
            if (!timestamp) return '未知时间';
            const date = new Date(timestamp);
            return date.toLocaleString();
        },
        formatUptime(seconds) {
            if (!seconds) return '0秒';
            const days = Math.floor(seconds / 86400);
            const hours = Math.floor((seconds % 86400) / 3600);
            const mins = Math.floor((seconds % 3600) / 60);
            const secs = Math.floor(seconds % 60);

            let result = '';
            if (days > 0) result += `${days}天 `;
            if (hours > 0) result += `${hours}小时 `;
            if (mins > 0) result += `${mins}分钟 `;
            result += `${secs}秒`;

            return result;
        },
        truncateCommand(command, maxLength = 50) {
            if (!command) return '';
            if (command.length <= maxLength) return command;
            return command.substring(0, maxLength) + '...';
        }
    }
}
</script>

<style scoped>
.dashboard-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #eee;
    height: 100%;
    overflow-y: auto;
}

h1 {
    color: #fff;
    margin-bottom: 5px;
}

.last-update {
    color: #7f8c8d;
    margin-bottom: 20px;
    font-size: 0.9em;
}

.card {
    background: #192028;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

h2 {
    color: #3498db;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
}

h3 {
    color: #7f8c8d;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1em;
}

.row {
    display: flex;
    gap: 20px;
}

.row>.card {
    flex: 1;
}

.system-overview .overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;

}

.system-overview .overview-grid>div {
    /* 不允许换行 */
    white-space: nowrap;

}

.label {
    font-weight: bold;
    margin-right: 10px;
    color: #7f8c8d;
}

.value {
    color: #999;
}

.cpu-info {
    margin-bottom: 15px;
}

.cpu-brand {
    font-weight: bold;
    font-size: 1.1em;
}

.cpu-cores {
    color: #7f8c8d;
    font-size: 0.9em;
}

.progress-container {
    margin: 15px 0;
}

.progress-label {
    margin-bottom: 5px;
    font-size: 0.9em;
}

.progress-bar {
    height: 10px;
    background: #ecf0f1;
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #3498db;
    border-radius: 5px;
}

.progress-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: #7f8c8d;
    margin-top: 5px;
}

.cpu-temp,
.node-memory {
    font-size: 0.9em;
    color: #7f8c8d;
    margin-top: 10px;
}

.disks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.disk-item {
    border: 1px solid #ecf0f1;
    border-radius: 5px;
    padding: 10px;
}

.disk-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.disk-fs {
    font-weight: bold;
}

.disk-type {
    color: #7f8c8d;
    font-size: 0.8em;
}

.disk-size {
    font-size: 0.9em;
    margin-bottom: 5px;
}

.network-traffic {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.network-interfaces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.interface-item {
    border: 1px solid #ecf0f1;
    border-radius: 5px;
    padding: 10px;
}

.interface-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.interface-ip {
    font-size: 0.8em;
    color: #7f8c8d;
}

.process-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.process-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.process-table th,
.process-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
}

.process-table th {
    background: #f8f9fa33;
    color: #eee;
}

.command-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }

    .system-overview .overview-grid {
        grid-template-columns: 1fr;
    }

    .disks-grid {
        grid-template-columns: 1fr;
    }
}
</style>